<template>
	<view class="share-card-container">
		<!-- 分享预览卡片 -->
		<view class="share-card" :class="cardType" v-if="visible">
			<view class="card-header">
				<view class="app-info">
					<image class="app-logo" src="/static/icons/logo.png" mode="aspectFit"></image>
					<view class="app-details">
						<text class="app-name">合一个</text>
						<text class="app-desc">易经占卜</text>
					</view>
				</view>
				<view class="close-btn" @tap="closeCard">
					<text class="close-text">✕</text>
				</view>
			</view>
			
			<view class="card-content">
				<!-- 卦象展示 -->
				<view class="hexagram-section" v-if="hexagram">
					<view class="hexagram-visual">
						<text class="hexagram-symbols">{{ hexagram.fullSymbol }}</text>
					</view>
					<view class="hexagram-info">
						<text class="hexagram-name">{{ hexagram.name }}</text>
						<text class="hexagram-desc">{{ hexagram.description }}</text>
					</view>
				</view>
				
				<!-- 问题展示 -->
				<view class="question-section" v-if="question">
					<text class="question-label">占卜问题</text>
					<text class="question-text">{{ question }}</text>
				</view>
				
				<!-- 简要解读 -->
				<view class="interpretation-section" v-if="interpretation">
					<text class="interpretation-text">{{ interpretation }}</text>
				</view>
			</view>
			
			<view class="card-footer">
				<view class="qr-section">
					<image class="qr-code" src="/static/icons/logo.png" mode="aspectFit"></image>
					<text class="qr-text">扫码体验</text>
				</view>
				<view class="brand-section">
					<text class="brand-text">来自"合一个"小程序</text>
					<text class="brand-desc">基于传统智慧的现代解读</text>
				</view>
			</view>
		</view>
		
		<!-- 海报画布 -->
		<canvas 
			v-if="showCanvas"
			class="poster-canvas" 
			canvas-id="shareCanvas"
			:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
		></canvas>
	</view>
</template>

<script>
export default {
	name: 'ShareTemplate',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		cardType: {
			type: String,
			default: 'default', // default, elegant, modern
			validator: function (value) {
				return ['default', 'elegant', 'modern'].indexOf(value) !== -1
			}
		},
		hexagram: {
			type: Object,
			default: null
		},
		question: {
			type: String,
			default: ''
		},
		interpretation: {
			type: String,
			default: ''
		},
		showCanvas: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			canvasWidth: 750,
			canvasHeight: 1334
		}
	},
	methods: {
		closeCard() {
			this.$emit('close')
		},
		
		/**
		 * 生成海报
		 */
		generatePoster() {
			return new Promise((resolve, reject) => {
				const ctx = uni.createCanvasContext('shareCanvas', this)
				
				// 设置画布背景
				this.drawBackground(ctx)
				
				// 绘制内容
				this.drawContent(ctx)
				
				// 生成图片
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'shareCanvas',
						success: (res) => {
							resolve(res.tempFilePath)
						},
						fail: (error) => {
							reject(error)
						}
					}, this)
				})
			})
		},
		
		/**
		 * 绘制背景
		 */
		drawBackground(ctx) {
			// 创建渐变背景 - 更加精美的渐变效果
			const gradient = ctx.createLinearGradient(0, 0, this.canvasWidth, this.canvasHeight)
			gradient.addColorStop(0, '#667eea')
			gradient.addColorStop(0.5, '#764ba2')
			gradient.addColorStop(1, '#f093fb')
			
			ctx.fillStyle = gradient
			ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
			
			// 添加装饰性图案 - 八卦元素
			this.drawDecorativePatterns(ctx)
			
			// 添加光晕效果
			this.drawLightEffects(ctx)
		},
		
		/**
		 * 绘制内容
		 */
		drawContent(ctx) {
			// 绘制白色内容区域 - 带圆角和阴影效果
			const contentTop = 180
			const contentHeight = this.canvasHeight - 380
			const cornerRadius = 20
			
			// 绘制阴影效果
			ctx.shadowColor = 'rgba(0, 0, 0, 0.2)'
			ctx.shadowBlur = 20
			ctx.shadowOffsetX = 0
			ctx.shadowOffsetY = 10
			
			// 绘制圆角矩形
			ctx.fillStyle = '#ffffff'
			this.drawRoundedRect(ctx, 40, contentTop, this.canvasWidth - 80, contentHeight, cornerRadius)
			ctx.fill()
			
			// 重置阴影
			ctx.shadowColor = 'transparent'
			ctx.shadowBlur = 0
			
			// 绘制卦象
			if (this.hexagram) {
				// 绘制卦象背景圆
				ctx.fillStyle = 'rgba(102, 126, 234, 0.1)'
				ctx.beginPath()
				ctx.arc(this.canvasWidth / 2, contentTop + 120, 80, 0, 2 * Math.PI)
				ctx.fill()
				
				// 绘制卦象符号
				ctx.fillStyle = '#667eea'
				ctx.font = 'bold 90px "SimSun", serif'
				ctx.textAlign = 'center'
				ctx.textBaseline = 'middle'
				ctx.fillText(this.hexagram.fullSymbol, this.canvasWidth / 2, contentTop + 120)
				
				// 绘制卦象名称
				ctx.fillStyle = '#333333'
				ctx.font = 'bold 40px "PingFang SC", "Microsoft YaHei", sans-serif'
				ctx.fillText(this.hexagram.name, this.canvasWidth / 2, contentTop + 220)
				
				// 绘制卦象描述
				if (this.hexagram.description) {
					ctx.fillStyle = '#666666'
					ctx.font = '28px "PingFang SC", "Microsoft YaHei", sans-serif'
					const descLines = this.wrapText(ctx, this.hexagram.description, this.canvasWidth - 120)
					descLines.forEach((line, index) => {
						ctx.fillText(line, this.canvasWidth / 2, contentTop + 270 + index * 35)
					})
				}
			}
			
			// 绘制问题
			if (this.question) {
				ctx.fillStyle = '#333333'
				ctx.font = 'bold 32px "PingFang SC", "Microsoft YaHei", sans-serif'
				ctx.textAlign = 'center'
				ctx.fillText('占卜问题', this.canvasWidth / 2, contentTop + 350)
				
				ctx.fillStyle = '#666666'
				ctx.font = '28px "PingFang SC", "Microsoft YaHei", sans-serif'
				ctx.textAlign = 'left'
				
				// 文本换行处理
				const maxWidth = this.canvasWidth - 120
				const lines = this.wrapText(ctx, this.question, maxWidth)
				lines.forEach((line, index) => {
					ctx.fillText(line, 70, contentTop + 400 + index * 35)
				})
			}
			
			// 绘制解读
			if (this.interpretation) {
				ctx.fillStyle = '#333333'
				ctx.font = 'bold 32px "PingFang SC", "Microsoft YaHei", sans-serif'
				ctx.textAlign = 'center'
				ctx.fillText('解读', this.canvasWidth / 2, contentTop + 500)
				
				ctx.fillStyle = '#666666'
				ctx.font = '26px "PingFang SC", "Microsoft YaHei", sans-serif'
				ctx.textAlign = 'left'
				
				const maxWidth = this.canvasWidth - 120
				const lines = this.wrapText(ctx, this.interpretation, maxWidth)
				lines.forEach((line, index) => {
					ctx.fillText(line, 70, contentTop + 550 + index * 32)
				})
			}
			
			// 绘制底部信息和二维码
			this.drawFooter(ctx)
		},
		
		/**
		 * 文本换行处理
		 */
		wrapText(ctx, text, maxWidth) {
			const words = text.split('')
			const lines = []
			let currentLine = ''
			
			for (let word of words) {
				const testLine = currentLine + word
				const metrics = ctx.measureText(testLine)
				const testWidth = metrics.width
				
				if (testWidth > maxWidth && currentLine !== '') {
					lines.push(currentLine)
					currentLine = word
				} else {
					currentLine = testLine
				}
			}
			lines.push(currentLine)
			
			return lines
		},
		
		/**
		 * 绘制装饰性图案
		 */
		drawDecorativePatterns(ctx) {
			// 绘制八卦符号装饰
			ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'
			const symbols = ['☰', '☷', '☳', '☴', '☵', '☲', '☶', '☱']
			
			// 在背景上随机分布八卦符号
			for (let i = 0; i < 20; i++) {
				const x = Math.random() * this.canvasWidth
				const y = Math.random() * this.canvasHeight
				const size = 20 + Math.random() * 40
				const symbol = symbols[Math.floor(Math.random() * symbols.length)]
				
				ctx.save()
				ctx.translate(x, y)
				ctx.rotate(Math.random() * Math.PI * 2)
				ctx.font = `${size}px serif`
				ctx.textAlign = 'center'
				ctx.textBaseline = 'middle'
				ctx.fillText(symbol, 0, 0)
				ctx.restore()
			}
		},
		
		/**
		 * 绘制光晕效果
		 */
		drawLightEffects(ctx) {
			// 添加光晕效果
			const gradient = ctx.createRadialGradient(
				this.canvasWidth / 2,
				this.canvasHeight / 3,
				0,
				this.canvasWidth / 2,
				this.canvasHeight / 3,
				300
			)
			gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)')
			gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
			
			ctx.fillStyle = gradient
			ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
		},
		
		/**
		 * 绘制圆角矩形
		 */
		drawRoundedRect(ctx, x, y, width, height, radius) {
			ctx.beginPath()
			ctx.moveTo(x + radius, y)
			ctx.lineTo(x + width - radius, y)
			ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
			ctx.lineTo(x + width, y + height - radius)
			ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
			ctx.lineTo(x + radius, y + height)
			ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
			ctx.lineTo(x, y + radius)
			ctx.quadraticCurveTo(x, y, x + radius, y)
			ctx.closePath()
		},
		
		/**
		 * 绘制底部信息
		 */
		drawFooter(ctx) {
			// 绘制小程序二维码区域
			const qrSize = 120
			const qrX = this.canvasWidth - 80 - qrSize
			const qrY = this.canvasHeight - 100 - qrSize
			
			// 绘制二维码背景
			ctx.fillStyle = '#f8f9fa'
			this.drawRoundedRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 40, 10)
			ctx.fill()
			
			// 绘制二维码占位符
			ctx.fillStyle = '#667eea'
			ctx.fillRect(qrX, qrY, qrSize, qrSize)
			
			// 绘制二维码文字
			ctx.fillStyle = '#666666'
			ctx.font = '20px "PingFang SC", "Microsoft YaHei", sans-serif'
			ctx.textAlign = 'center'
			ctx.fillText('扫码体验', qrX + qrSize / 2, qrY + qrSize + 25)
			
			// 绘制品牌信息
			ctx.fillStyle = '#ffffff'
			ctx.font = '24px "PingFang SC", "Microsoft YaHei", sans-serif'
			ctx.textAlign = 'left'
			ctx.fillText('来自"合一个"小程序', 60, this.canvasHeight - 80)
			
			ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
			ctx.font = '20px "PingFang SC", "Microsoft YaHei", sans-serif'
			ctx.fillText('基于传统智慧的现代解读', 60, this.canvasHeight - 50)
		}
	}
}
</script>

<style lang="scss" scoped>
.share-card-container {
	position: relative;
}

.share-card {
	background: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	margin: 32rpx;
	
	&.elegant {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
	}
	
	&.modern {
		background: #1a1a1a;
		color: white;
		
		.card-header, .card-content, .card-footer {
			color: white;
		}
		
		.app-name, .hexagram-name, .question-text {
			color: white;
		}
		
		.app-desc, .question-label, .brand-text {
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.app-info {
		display: flex;
		align-items: center;
		
		.app-logo {
			width: 64rpx;
			height: 64rpx;
			border-radius: 12rpx;
			margin-right: 24rpx;
		}
		
		.app-details {
			.app-name {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 4rpx;
			}
			
			.app-desc {
				display: block;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	
	.close-btn {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.close-text {
			font-size: 20rpx;
			color: #666666;
		}
	}
}

.card-content {
	padding: 48rpx 32rpx;
}

.hexagram-section {
	text-align: center;
	margin-bottom: 48rpx;
	
	.hexagram-visual {
		margin-bottom: 24rpx;
		
		.hexagram-symbols {
			font-size: 120rpx;
			line-height: 1;
		}
	}
	
	.hexagram-info {
		.hexagram-name {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 16rpx;
		}
		
		.hexagram-desc {
			display: block;
			font-size: 28rpx;
			color: #666666;
			line-height: 1.5;
		}
	}
}

.question-section {
	margin-bottom: 32rpx;
	padding: 32rpx;
	background: rgba(106, 130, 251, 0.05);
	border-radius: 16rpx;
	border-left: 6rpx solid #6A82FB;
	
	.question-label {
		display: block;
		font-size: 24rpx;
		color: #6A82FB;
		margin-bottom: 12rpx;
		font-weight: 500;
	}
	
	.question-text {
		display: block;
		font-size: 32rpx;
		color: #333333;
		line-height: 1.6;
	}
}

.interpretation-section {
	padding: 32rpx;
	background: linear-gradient(135deg, #E0FFE6 0%, #C2FFD0 100%);
	border-radius: 16rpx;
	
	.interpretation-text {
		font-size: 30rpx;
		color: #333333;
		line-height: 1.6;
	}
}

.card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	background: #f8f9fa;
	border-top: 1rpx solid #f0f0f0;
	
	.qr-section {
		display: flex;
		align-items: center;
		
		.qr-code {
			width: 64rpx;
			height: 64rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
		}
		
		.qr-text {
			font-size: 24rpx;
			color: #666666;
		}
	}
	
	.brand-section {
		text-align: right;
		
		.brand-text {
			display: block;
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 4rpx;
		}
		
		.brand-desc {
			display: block;
			font-size: 22rpx;
			color: #999999;
		}
	}
}

.poster-canvas {
	position: fixed;
	top: -9999rpx;
	left: -9999rpx;
	z-index: -1;
}
</style>